<template>
  <div class="container">
    <!-- 左侧面板 -->
    <div class="left-panel">
      <!-- 文案上传模块增加加载状态 -->
      <div class="upload-section">
        <div class="section-header">
          <h3>文案上传</h3>
          <el-tooltip content="支持多段落文本智能分镜" placement="top">
            <i class="el-icon-info"></i>
          </el-tooltip>
        </div>
        <el-input
          v-model="scriptContent"
          type="textarea"
          :rows="6"
          placeholder="请输入文案内容（推荐300字以内）"
          class="textarea"
          resize="none"
        ></el-input>
        <div class="button-group" style="margin-top: 15px;">
          <el-button 
            type="primary" 
            :loading="isAILoading"
            @click="handleAIModify"
          >
            AI智能优化
          </el-button>
          <el-button 
            type="success" 
            @click="handleSplit"
            :disabled="!scriptContent"
          >
            智能分镜
          </el-button>
        </div>
      </div>

      <!-- 配音设置增加音色预览 -->
      <div class="voice-setting">
        <h3>音效配置</h3>
        <div class="voice-control">
          <div class="voice-preview">
            <el-avatar :size="40" :src="currentVoice.avatar"/>
            <div class="voice-meta">
              <p class="voice-name">{{ currentVoice.name }}</p>
              <p class="voice-type">{{ currentVoice.type }}</p>
            </div>
          </div>
          <div class="voice-actions">
            <el-button 
              type="text"
              icon="el-icon-video-play" 
              @click="handlePreview"
            >
              试听
            </el-button>
            <el-button 
              type="text"
              icon="el-icon-refresh" 
              @click="handleSwitch"
            >
              更换
            </el-button>
          </div>
        </div>
      </div>
		<div class="voice-setting">
        <h3>BGM配置</h3>
        <div class="voice-control">
          <div class="voice-preview">
            <el-avatar :size="40" :src="BGM.avatar"/>
            <div class="voice-meta">
              <p class="voice-name">{{ BGM.name }}</p>
              <p class="voice-type">{{ BGM.type }}</p>
            </div>
          </div>
          <div class="voice-actions">
            <el-button 
              type="text"
              icon="el-icon-video-play" 
              @click="handlePreview"
            >
              试听
            </el-button>
            <el-button 
              type="text"
              icon="el-icon-refresh" 
              @click="handleSwitch"
            >
              更换
            </el-button>
          </div>
        </div>
      </div>
      <!-- 生成按钮状态反馈 -->
      <el-button 
        type="primary" 
        class="generate-btn"
        :loading="isGenerating"
        @click="handleGenerate"
      >
        {{ isGenerating ? '合成中...' : '开始视频合成' }}
      </el-button>
    </div>

    <!-- 右侧面板 -->
    <div class="right-panel">
      <!-- 素材匹配增加空状态 -->
      <div class="section-header">
        <h2>智能素材匹配</h2>
        <el-tag type="info">已匹配 {{ materials.length }} 个素材</el-tag>
      </div>
      <template v-if="materials.length">
        <div class="material-grid">
          <!-- 每个素材项增加悬停效果 -->
          <div 
            v-for="(item, index) in materials" 
            :key="index" 
            class="material-item"
            @mouseenter="hoverIndex = index"
            @mouseleave="hoverIndex = -1"
          >
            <div class="thumbnail">
              <!-- <img :src="item.cover" /> -->
			  <video  :src="item.url"></video>
              <div class="hover-layer" :class="{ active: hoverIndex === index }">
                <el-button type="text" icon="el-icon-zoom-in">预览</el-button>
              </div>
            </div>
            <div class="material-info" style="padding: 15px;">
              <p class="material-text">{{ item.test.replace("\\n","") }}</p>
              <div class="tags">
               <!-- <el-tag
                  v-for="tag in item.tags"
                  :key="tag"
                  size="small"
                  :type="tagTypeMap[tag] || 'info'"
                >{{ tag }}</el-tag> -->
				
				<el-tag
				  size="small"
				  v-if="item.label1"
				>{{ item.label1 }}</el-tag>
				<el-tag
				v-if="item.label2"
				  size="small"
				>{{ item.label2 }}</el-tag>
				
              </div>
            </div>
          </div>
        </div>
      </template>
      <el-empty v-else description="暂无匹配素材，请先输入文案并点击智能分镜"></el-empty>

      <!-- 合成结果增加完成状态 -->
      <div class="result-section">
        <div class="section-header">
          <h3>合成队列（{{ generatedResults.length }}）</h3>
          <el-button 
            type="text"
            :disabled="!generatedResults.length"
            @click="handleClearAll"
          >
            清空队列
          </el-button>
        </div>
        <div class="result-grid">
          <template v-if="generatedResults.length">
            <div 
              v-for="(result, index) in generatedResults" 
              :key="index" 
              class="result-item"
            >
              <div class="video-preview">
                <!-- <img :src="result.image" /> -->
				<video style="background: #000;width: 100%;height: 100%;" controls :src="result.image"></video>
                <!-- <div class="status-overlay" v-if="result.progress === 100">
                  <i class="el-icon-circle-check"></i>
                </div> -->
              </div>
              <div class="progress">
                <el-progress 
                  :percentage="result.progress"
                  :stroke-width="12"
                  :color="result.progress === 100 ? '#67C23A' : ''"
                  striped
                  :striped-flow="result.progress < 100"
                ></el-progress>
              </div>
              <div class="action-buttons">
                <el-button 
                  size="small" 
                  @click="handleRemove(index)"
                  :disabled="result.progress < 100"
                >
                  移除
                </el-button>
                <el-button 
                  type="primary" 
                  size="small"
                  :disabled="result.progress < 100"
                  @click="handleSave(index)"
                >
                  {{ result.progress === 100 ? '下载视频' : '等待中' }}
                </el-button>
              </div>
            </div>
          </template>
          <el-empty v-else description="合成队列为空，点击开始合成生成视频"></el-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import axios from 'axios'
export default {
  data() {
    return {
      hoverIndex: -1,
      isAILoading: false,
      isGenerating: false,
      currentVoice: {
        name: '周老板',
        type: '通用型',
        avatar: 'https://example.com/voice-avatar.png'
      },
	  BGM: {
	    name: '豆花之歌',
	    type: '纯音乐',
	    avatar: 'https://example.com/voice-avatar.png'
	  },
      tagTypeMap: {
        '科技': 'primary',
        '创新': 'success',
        '自然': 'warning'
      },
      scriptContent: '',
      materials: [
        // {
        //   cover: 'https://ai-public.mastergo.com/ai/img_res/ff148e954283b843f95981f8f3f3ce6c.jpg',
        //   test: '在这个数字化时代，智能视频制作正在改变内容创作的方式。',
        //   tags: ['科技', '创新']
        // },
		{
		  cover: 'https://ai-public.mastergo.com/ai/img_res/ff148e954283b843f95981f8f3f3ce6c.jpg',
		  test: '请输入文案进行AI智能优化或智能分镜',
		  // tags: ['科技', '创新']
		},
        // 其他素材数据...
      ],
      generatedResults: [
        // {
        //   image: 'https://zk.yaoxuankeji.club:8199/images/2025/04/08/0e3e065ceebc44a69c7ca53829a60568.mp4',
        //   progress: 0
        // },
        // {
        //   image: 'https://ai-public.mastergo.com/ai/img_res/cd628b8b9025a68b655fa5059113313a.jpg',
        //   progress: 45
        // },
        // {
        //   image: 'https://ai-public.mastergo.com/ai/img_res/9cdb960c37b4a0f6514301a3cca35741.jpg',
        //   progress: 60
        // }
      ]
    }
  },
  // 方法部分保持不变...
  methods:{
	  handleSplit(){
		  this.isAILoading = true
		  let data = {
				"workflow_id":"7488151561647456293",
				"parameters":{
					"input":this.scriptContent,
					"chanpin":"老板",
					"userId":"10002"
				}
			}
			
		  axios.post("https://api.coze.cn/v1/workflow/run",data,{
			  headers:{
				  "Authorization":"Bearer pat_gjJ9FHGpY1w1GTI9HzKpSUgec5YxwMflwzQPCsLUMRXHSgM7OeujreMzklaGOUYK"
			  }
		  }).then(res=>{
			  let result = JSON.parse(res.data.data)
			  console.log(result)
			  this.materials = result.output
			  this.isAILoading = false
			  this.$message.success("AI优化成功")
		  })
	  },
	  handleGenerate(){
		  this.isGenerating = true
		  this.generatedResults.push({
		  			  image:"",
		  			  progress:0
		  })
		  let timer = setInterval(()=>{
			  let that = this
			  // 生成 1、2 或 3 的随机整数
			  const randomNum = Math.floor(Math.random() * 3) + 1;
			  console.log(randomNum);
			  that.generatedResults[0].progress += randomNum
		  },2000)
		  let data = {
			   "voice_type": "S_56th4xVn1",
			    "cluster":"volcano_icl",
				"list": this.materials
		  }
		  
		  axios.post("http://aimeyoo.a1.luyouxia.net:25445/generateVideo",data).then(res=>{
			  console.log(res.data.msg)
			  clearInterval(timer)
			  this.generatedResults[0].image=res.data.msg
			  this.generatedResults[0].progress = 100
			  this.$message.success("AI合成成功")
			  this.isGenerating = false
		  })
	  }
  }
}
</script>

<style scoped>
/* 基础布局优化 */
.container {
  min-height: 100vh;
  background: #f5f7fa;
  display: grid;
  grid-template-columns: minmax(300px, 380px) 1fr;
  gap: 32px;
  padding: 24px;
  max-width: 1600px;
  margin: 0 auto;
}

/* 左侧面板深度优化 */
.left-panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: 24px;
  height: calc(100vh - 48px);
}

.upload-section, .voice-setting {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s;
}

.upload-section:hover, .voice-setting:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}


/* 配音控制区域优化 */
.voice-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
}

.voice-preview {
  display: flex;
  align-items: center;
  gap: 12px;
}

.voice-meta p {
  margin: 0;
  line-height: 1.4;
}

.voice-name {
  font-weight: 500;
  color: #303133;
}

.voice-type {
  font-size: 12px;
  color: #909399;
}

/* 右侧面板优化 */
.right-panel {
  min-width: 0; /* 防止网格溢出 */
}

.material-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.material-item {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s;
  max-width: 250px;
}

.material-item:hover {
  transform: translateY(-4px);
}

.thumbnail {
  position: relative;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.hover-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hover-layer.active {
  opacity: 1;
}

/* 合成结果优化 */
.result-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.video-preview {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
}

.status-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(103, 194, 58, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
}

/* 进度条优化 */
.el-progress {
  padding: 8px 0;
}

/* 响应式优化 */
@media (max-width: 1200px) {
  .container {
    grid-template-columns: 1fr;
  }
  
  .left-panel {
    position: static;
    height: auto;
  }
  
  .material-grid, .result-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .material-grid, .result-grid {
    grid-template-columns: 1fr;
  }
}
</style>